import { getSolutionByName } from '@/apis/refer'
import { Card, Breadcrumb, Table, Button, Space } from 'antd'
import { useEffect, useState } from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'

import {
  CarOutlined,
  EyeOutlined
} from '@ant-design/icons'
import ReferRoad from './ReferRoad'
import { paginationConfig } from '@/utils'

const ReferItem = () => {
  const location = useLocation()
  const queryParams = new URLSearchParams(location.search)
  const filename = queryParams.get('data_name')

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      key: 'id',
      fixed: 'left',
      width: 100,
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '路径数量',
      dataIndex: 'r_num',
      align: 'center',
      key: 'r_num',
      width: 150,
      sorter: (a, b) => a.r_num - b.r_num,
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '总旅行路程',
      dataIndex: 'dist',
      align: 'center',
      key: 'dist',
      width: 150,
      sorter: (a, b) => a.dist - b.dist,
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '总旅行时间',
      dataIndex: 'time',
      align: 'center',
      key: 'time',
      width: 150,
      sorter: (a, b) => a.time - b.time,
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '总等待时间',
      dataIndex: 'wait',
      align: 'center',
      key: 'wait',
      width: 150,
      sorter: (a, b) => a.wait - b.wait,
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '总延误时间',
      dataIndex: 'delay',
      align: 'center',
      key: 'delay',
      width: 150,
      sorter: (a, b) => a.delay - b.delay,
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      align: 'center',
      ellipsis: true,
      fixed: 'right',
      width: 200,
      render: (record) => {
        return (
          <Space>
            <Button
              icon={<CarOutlined />}
              type="primary"
              style={{ background: "orange", }}
              onClick={() => showModal(record)}
            >
              查看路线
            </Button>
            <Button
              icon={<EyeOutlined />}
              type="primary"
              style={{ background: "#f759ab", }}
              onClick={() => showRoad(record)}
            >
              路径可视化
            </Button>
          </Space>
        )
      }
    }
  ]

  const [folderContent, setFolderContent] = useState([])
  const [txtContent, setTxtContent] = useState([])

  const processData = (data) => {
    if (data) {
      return data.map((item, index) => {
        return {
          id: index + 1,
          key: index + 1,
          r_num: item[0],
          dist: item[1],
          time: item[2],
          wait: item[3],
          delay: item[4]
        }
      })
    }
  }

  useEffect(() => {
    const getSolution = async () => {
      const res = await getSolutionByName(filename)
      setFolderContent(res.folder_content)
      setTxtContent(processData(res.txt_content))
    }
    getSolution()
  }, [filename])

  // 点击展示路线

  // 对话框
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [roadList, setRoadList] = useState([])
  const showModal = (record) => {
    setRoadList(folderContent[record.id - 1])
    setIsModalOpen(true)
  }
  const handleOk = () => {
    setIsModalOpen(false)
  }
  const handleCancel = () => {
    setIsModalOpen(false)
  }

  // 可视化
  const navigate = useNavigate()
  const showRoad = (record) => {
    console.log(1111212)
    const roadList = folderContent[record.id - 1]
    const formattedPaths = []
    for (let i = 0;i < roadList.length;i += 2) {
      const path = roadList[i]
      formattedPaths.push(path)
    }
    console.log(txtContent[record.id - 1])
    const roadInfo = txtContent[record.id - 1]
    navigate('/show', { state: { data: formattedPaths, info: roadInfo } })
  }

  return (
    <div>
      <Card
        title={
          <Breadcrumb items={[
            { title: <Link to={'/'}>首页</Link> },
            { title: <Link to={'/refer'}>参考解集</Link> },
            { title: `${filename}` },
          ]}
            className='breadcrumb'
          />
        }
      >
        <Table
          bordered
          columns={columns}
          scroll={{
            x: '100vw',
            y: 'calc(100vh - 350px)',
          }}
          dataSource={txtContent}
          pagination={paginationConfig}
        >

        </Table>
        <ReferRoad
          isModalOpen={isModalOpen}
          handleOk={handleOk}
          handleCancel={handleCancel}
          folderContent={folderContent}
          roadList={roadList}
        />
      </Card>
    </div>
  )
}

export default ReferItem